<template>
    <IDrawer v-model="defaultValue" :loading="loading">
        <Form :model="data" :rules="ruleValidate" ref="formCreate">
            <Row :gutter="12">
                <Col span="12">
                    <FormItem label="产品SKU" prop="sku">
                        <Input placeholder="产品SKU" v-model="data.sku"></Input>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="产品名称" prop="name">
                        <Input placeholder="产品名称" v-model="data.name"></Input>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="产品单位" prop="unit">
                        <RemoteSelect url="common/select/unit" v-model="data.unit"></RemoteSelect>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="存储条件" prop="condition">
                        <RemoteSelect url="common/select/dictionaries/PRODUCT_CONDITION" v-model="data.condition"></RemoteSelect>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="需要进行效期管理" prop="validity">
                        <RemoteSelect url="common/select/dictionaries/PRODUCT_VALIDITY" @on-change="validityChange" v-model="data.validity"></RemoteSelect>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="保质期禁售天数" prop="lockup_validity">
                        <Input v-model="data.lockup_validity" number></Input>
                    </FormItem>
                </Col>
                <Col span="24">
                    <FormItem label="产品图片" prop="images">
                        <UploadImages v-model="data.images" url="/api/common/update/image"></UploadImages>
                    </FormItem>
                </Col>
            </Row>
        </Form>
        <div slot="footer">
            <Button type="primary" icon="ios-add" @click="submit('formCreate')">提交</Button>
        </div>
    </IDrawer>
</template>

<script>
    import IDrawerMixins from "../../../../mixins/iDrawerMixins";
    import IDrawer from "../../../../components/layout/IDrawer";
    import IData from "./data"
    import RemoteSelect from "../../../../components/form/remoteSelect";
    import UploadImages from "../../../../components/form/uploadImages";

    export default {
        name: "create",
        components: {UploadImages, RemoteSelect, IDrawer},
        mixins: [IDrawerMixins, IData],
        methods: {
            submit(name){
                this.validate(name).then(() => {
                    this.loading = true;
                    this.$http.post(`product/index`, this.data).then(() => {
                        this.defaultValue = false;
                    }).finally(() => {
                        this.loading = false;
                    });
                }).catch();
            }
        }
    }
</script>

<style scoped>

</style>
